1
00:00:00,480 --> 00:00:01,410
Hello and welcome.

2
00:00:01,410 --> 00:00:09,940
In this lecture we are going to create the functionality for our app using javascript.

3
00:00:12,180 --> 00:00:12,710
All right.

4
00:00:12,750 --> 00:00:22,940
This is hard javascript far and the first thing I'm going to do is define the balloons using variables.

5
00:00:22,940 --> 00:00:27,550
So I'm going to grid variables for each of the balloons.

6
00:00:28,010 --> 00:00:33,060
So I have created variables for each of the balloon.

7
00:00:33,090 --> 00:00:39,770
So starting with like one here year variable called Balance zero and setted two equals two.

8
00:00:39,780 --> 00:00:47,660
The documents don't get element by either the function or method and we've passed it.

9
00:00:47,700 --> 00:00:56,640
The tool parameter for the balloon so that the balloon the actual balloon can be accessed via the parameter

10
00:00:56,640 --> 00:00:59,400
with past is so entirely and this is here.

11
00:00:59,400 --> 00:01:09,530
We've passed the doubtful value off the balloon itself saw slam one is the start all of variables right.

12
00:01:09,570 --> 00:01:13,830
OP to lie in.

13
00:01:14,890 --> 00:01:16,270
Twenty three.

14
00:01:16,280 --> 00:01:17,590
Cause they have 24 balloons.

15
00:01:17,590 --> 00:01:19,250
The first one being is zero.

16
00:01:19,430 --> 00:01:24,610
So send them all up the same variable name variable.

17
00:01:24,760 --> 00:01:30,430
Balloon 23 and so on and said it to quasi to did documental get a limit either.

18
00:01:30,440 --> 00:01:36,190
This method is what is used to access the outroar balloon.

19
00:01:40,460 --> 00:01:46,220
So these are the variables for each of the 24 balloons

20
00:01:49,030 --> 00:01:56,870
online 49 you would call a variable called a year is variable or is set to close to documental get men

21
00:01:56,930 --> 00:02:01,280
by day and have passed the you know balloons.

22
00:02:01,280 --> 00:02:07,340
So there's what this would do and these you know balance also variable What will what like 40 and I

23
00:02:07,340 --> 00:02:17,390
am is when all the balloons have been popped to display a message and this is the I.D. tool.

24
00:02:17,480 --> 00:02:20,350
It will grab to display the message.

25
00:02:20,360 --> 00:02:26,180
They said Deve call this if they see a mouse they will look for that deep tugging at it and then display

26
00:02:26,180 --> 00:02:32,560
the relevant message to reflect the or the balloons have been popped.

27
00:02:33,360 --> 00:02:42,800
So next day we're going to do is quit the function that will enable the popin of the balance.

28
00:02:42,800 --> 00:02:48,200
So this is a function that will be responsible for popping the balloon.

29
00:02:48,380 --> 00:02:50,930
So a line 51 defined a variable.

30
00:02:50,950 --> 00:02:56,860
They're called to find the function used the word function followed by the name Belum pop.

31
00:02:56,900 --> 00:03:02,640
That would be the name of a function and I have passed it a balloon variable.

32
00:03:02,860 --> 00:03:10,670
So inside the function in between the parentheses online one and the parentheses on in between the three

33
00:03:10,670 --> 00:03:18,650
the curly braces on line on to 1 and like 7 2 is what the function will do.

34
00:03:18,680 --> 00:03:24,000
So a pass to the variable quad balloon variable horror.

35
00:03:24,050 --> 00:03:27,170
Let me explain what this function does.

36
00:03:27,170 --> 00:03:35,770
I've got about three functions here so the main function which is on line to one is a function of chord.

37
00:03:35,780 --> 00:03:44,010
Balloon Popper and I've passed it a Param if there are balloon variable like fifty three.

38
00:03:44,220 --> 00:03:51,290
Of course the variable there which is a variable that was passed in like 5 to 1 and I have trashed an

39
00:03:51,410 --> 00:03:58,520
event listener saw what the event listener would do if the event listener will listen up for some activities

40
00:03:58,580 --> 00:04:00,290
of the mouse event.

41
00:04:00,290 --> 00:04:07,490
This now takes him to paramotor the first will be the mouse over mousehole as busily when you move your

42
00:04:07,490 --> 00:04:09,490
mouse over an element.

43
00:04:09,560 --> 00:04:14,050
The second is a function called Pop balloon.

44
00:04:14,250 --> 00:04:22,670
Alright so the hongchang pop ballon was weird to find out online 55 saw it the event now takes in two

45
00:04:22,670 --> 00:04:29,980
values of Param if there's the mouse over maybe pop balloon function.

46
00:04:30,070 --> 00:04:33,710
Muzzle is is an event.

47
00:04:33,920 --> 00:04:36,330
When you move your mouse over something.

48
00:04:36,380 --> 00:04:43,790
So basically what you see it while they function online 55 is same for the pop balloon function as the

49
00:04:44,060 --> 00:04:44,690
function though.

50
00:04:44,690 --> 00:04:46,190
Pop the balloon.

51
00:04:46,200 --> 00:04:55,010
What he's saying is that if the balloon variable that was defined in like the one if this doubt the

52
00:04:55,010 --> 00:04:58,930
background style the C S S is strictly equal to none.

53
00:04:58,940 --> 00:05:08,520
That is if there's no background style at all then on line 57 is seen in that text will be empty.

54
00:05:09,290 --> 00:05:20,590
But if like 59 seeing if the first condition of 56 is not true or is not met then try.

55
00:05:20,600 --> 00:05:29,570
The condition in life 59 which says if the balloon if the bag frankau law if there is something there

56
00:05:29,570 --> 00:05:34,270
is a background kolok then pop devoutness pop diba alone.

57
00:05:34,460 --> 00:05:36,360
There's a background call or let me there.

58
00:05:36,360 --> 00:05:43,670
Balloons available then trigger the text pops away you move your mouse over it.

59
00:05:43,670 --> 00:05:52,540
It all displayed text pop so the event listener will be listening for any miles that goes over the balloon.

60
00:05:52,820 --> 00:06:00,200
Only if there is imbalance visible it all display detects pop and they admit the balloon will disappear

61
00:06:00,230 --> 00:06:03,190
from the screen line 61.

62
00:06:03,230 --> 00:06:08,630
Same thing with its skull like a back up to like 60 saying.

63
00:06:08,680 --> 00:06:13,370
There's streatley no star left in the background it would be none.

64
00:06:13,370 --> 00:06:15,130
So was the balloonist pop.

65
00:06:15,140 --> 00:06:20,670
We don't expect any background colloid game for Lebanon because the balloons should be off the screen.

66
00:06:20,990 --> 00:06:26,040
That's what he's saying that background stalder background should be none.

67
00:06:28,420 --> 00:06:30,440
Line 66 again.

68
00:06:30,640 --> 00:06:32,830
The variable but the bulk variable.

69
00:06:32,830 --> 00:06:38,720
We've touched on another event listener and this one takes scene three values.

70
00:06:38,980 --> 00:06:41,430
The first is a mouse out event.

71
00:06:41,440 --> 00:06:50,640
That means when the mouse is out of the balloon pod is whole hour of force.

72
00:06:50,650 --> 00:06:56,950
So what is saying that when you move your mouse out of the balloon not should not pop or there's no

73
00:06:56,950 --> 00:06:58,610
ballon to pop.

74
00:06:58,630 --> 00:07:00,670
That's why he takes in a bullion value.

75
00:07:00,680 --> 00:07:04,750
Force is a value which means true of force.

76
00:07:04,780 --> 00:07:12,820
So when you move your mouse away from the balloon either there's nothing there to pop or the pop will

77
00:07:12,820 --> 00:07:17,500
not occur cause the mouse is out of the balloon.

78
00:07:17,590 --> 00:07:20,650
It's not over it.

79
00:07:20,650 --> 00:07:23,870
Line 6 see it word a function pop is over.

80
00:07:23,870 --> 00:07:30,520
So when you've actually popped the balloon the balance variable will display in that teks which is equal

81
00:07:30,640 --> 00:07:34,150
to this quote here.

82
00:07:34,150 --> 00:07:35,410
So what about Tex goof.

83
00:07:35,430 --> 00:07:38,410
You've defined the text I've defined.

84
00:07:38,430 --> 00:07:41,680
Well sure would be pop when the balloon is popped.

85
00:07:41,710 --> 00:07:45,330
We just pop right which is this one here and this.

86
00:07:45,840 --> 00:07:49,420
That's why that function is sane.

87
00:07:49,870 --> 00:07:57,730
Then you have to list each of the balance as I've done here from line seventy three all the way to a

88
00:07:57,730 --> 00:08:00,000
line 96.

89
00:08:00,130 --> 00:08:04,350
So Blue and how familiar detect these will be the variables.

90
00:08:04,360 --> 00:08:07,960
Now when defined in the function.

91
00:08:09,640 --> 00:08:17,000
We need to find a way to celebrate or illustrate that or the balloons have been popped.

92
00:08:17,110 --> 00:08:20,240
So we need to create a function to do that.

93
00:08:20,350 --> 00:08:21,880
So like 98.

94
00:08:21,880 --> 00:08:23,930
Two hundred and five.

95
00:08:24,010 --> 00:08:25,120
Like 98.

96
00:08:25,120 --> 00:08:28,620
Were you indeed documents that had event list now.

97
00:08:28,750 --> 00:08:38,740
So we're adding an event list now and we've posted a few parameters if the past the mouseover the no

98
00:08:38,740 --> 00:08:43,590
ballons function and also a bullion value of force.

99
00:08:43,690 --> 00:08:49,020
So online 99 we define a function code no balloons function.

100
00:08:49,120 --> 00:08:57,370
So we've got an if statement there we saying that if ballew 0 and the background is attached to it is

101
00:08:57,370 --> 00:08:58,680
streatley None.

102
00:08:59,650 --> 00:09:08,020
And balonne one listowel background attached to it is treacly none.

103
00:09:08,320 --> 00:09:10,130
So this process is the same.

104
00:09:10,130 --> 00:09:12,200
So you did the same for all the balloons.

105
00:09:12,220 --> 00:09:12,880
So you see.

106
00:09:12,940 --> 00:09:17,560
And balonne 1. star background is strictly equazen None.

107
00:09:17,560 --> 00:09:26,340
Same thing with BALLAnd to dos tower that background gradually to last all the way to twenty three.

108
00:09:26,800 --> 00:09:33,380
So what that is saying is that if all the values have disappeared from the screen that means even though

109
00:09:33,380 --> 00:09:40,420
streatley no background colour or light labella's have gone that's where that statement is to be then

110
00:09:40,420 --> 00:09:49,520
display the text online 100 and to display this text this is your style display display detects.

111
00:09:49,560 --> 00:09:53,230
Hmm block then Windle don't scroll.

112
00:09:53,230 --> 00:10:01,210
So if you allow scroll and this blee or the text that says we popped all the balloons.

113
00:10:01,300 --> 00:10:03,760
So that's basically what this function is doing.

114
00:10:03,760 --> 00:10:09,390
So it would be called Wayne or these buller's had been popped.

115
00:10:09,490 --> 00:10:11,360
So I will say this.

116
00:10:11,380 --> 00:10:17,650
And then we can have a look and see if we can pop some balloons.

117
00:10:17,660 --> 00:10:18,220
All right.

118
00:10:18,220 --> 00:10:25,050
We've got a balance so we just fusee move the mouse over them and you see them pop where you each one

119
00:10:25,120 --> 00:10:29,500
pop you see a text that displays pop.

120
00:10:29,500 --> 00:10:34,310
Hopefully just refreshed.

121
00:10:34,650 --> 00:10:35,270
Okay.

122
00:10:35,280 --> 00:10:37,110
Always make sure you save your work.

123
00:10:37,240 --> 00:10:45,600
I forgot to say hands they didn't respond initially so now family members of you say pop pop pop pop

124
00:10:45,630 --> 00:10:54,230
pop pop pop pop pop when our lead balloon as you know is far more mamzer way then pop it doesn't pop.

125
00:10:54,450 --> 00:10:57,500
Alright so pop pop pop.

126
00:10:57,520 --> 00:10:59,800
And then I can get a message to see wars.

127
00:10:59,800 --> 00:11:05,710
And this is a last function that displays this métis War or the balloons have been popped.

128
00:11:05,890 --> 00:11:10,300
So that's it for this project.

129
00:11:10,690 --> 00:11:16,130
We successfully created a balloon popping game.

130
00:11:16,180 --> 00:11:17,240
Thanks for watching.

131
00:11:17,290 --> 00:11:24,280
Help is being used for play around with some of the values make it he can actually add to look for ways

132
00:11:24,280 --> 00:11:26,520
to improve it to be.

133
00:11:26,530 --> 00:11:30,380
And in a popping sound run a dandy text display.

134
00:11:30,390 --> 00:11:38,260
You could make it pop and make it make it naturally sound so you can explore what you can do to take

135
00:11:38,260 --> 00:11:39,340
this further.

136
00:11:39,340 --> 00:11:40,840
Thanks for watching.

137
00:11:40,840 --> 00:11:41,830
Bye for now.